<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js" ></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css"> 
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js" ></script>
	
	
<!-- 用户列表 -->
<style>
	th {
		text-align: center;
	}
	
	.table>tbody>tr>td {
		line-height: 70px;
		text-align: center;
		height:70px;
		margin: 0px;
	}
	
.bg{ background: none; border: none;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
#iocn img{ height:90px; width: 120px; }
#iocn ul{ margin:0px; padding:0px; }
#iocn li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
#iocn li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
#iocn li:hover a{ background-color:rgba(0,0,0,0.8); }
	
</style>
<div id="data_page" class="in_page">
	
		<div class="panel panel-default">
			<div class="panel-body">
				<form class="form-inline" method="get" name="keyword" id="keyword">
					<div class="form-group">
						
					文章底部广告管理
					</div>
					<div class="form-group" style="float: right;">
						<button type="button" class="btn btn-sm btn-primary" id="add" >添加广告</button>
					</div>
				</form>
			</div>
		</div>
		
	<table class="table table-striped table-bordered table-condensed ">
		<thead>
			<tr>
				<th width="120px">ID</th>
				<th>名称</th>
				<th>描述</th>
				<th>链接地址</th>
				<th>图片</th>
				<th width="50px">操作</th>

			</tr>
		</thead>
		<tbody>	
			<volist name="list" id="li">			
				<tr>
					<td>{$key}</td>
					<td>{$li.title}</td>
					<td>{$li.desc}</td>
					<td>{$li.url}</td>
					<td><img src='{$li.img}' width="320px" height="70px"/></td>
					<!-- <td><img src='{$li.img}' width="50px" height="50px"/></td> -->
					<td width="150px">
                        <a href="{:U('advertising_edit', array('id'=>$li['id']))}">
                            <button type="button" class="btn btn-sm btn-success" >修改</button>
                        </a>
						<button type="button" class="btn btn-sm btn-danger link" link="{:U('Article/del_advertising')}?id={$li.id}">删除</button>
					</td>
				</tr>
			</volist>
		</tbody>
	</table>

<div class="modal fade" id="user-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		 <div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">添加广告</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  method="post">
					<input type="hidden" id="id" value="{$id}" />
					<div class="form-group">
						<label for="title" class="col-sm-2 control-label" id="attrname">名称:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="title" />
						</div>
					</div>
					<div class="form-group">
						<label for="desc" class="col-sm-2 control-label" id="attrname">描述:</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="desc" />
						</div>
					</div>
					<div class="form-group">
						<label for="title" class="col-sm-2 control-label">链接地址:</label>
						<div class="col-sm-6">
							<input type="url" class="form-control" id="src" placeholder="如：https://www.baidu.com/"/>
						</div>
					</div>
					<div class="form-group">
						<!-- <label for="inputPassword3" class="col-sm-2 control-label" id="iocnname">(640x100)广告图片</label>
						<div class="col-sm-10">
							<input type="file" class="form-control" id="icon"><br/>
					    	<div id="iocn" class="upviewer"></div>
						</div> -->
	                    <label for="icon" class="col-sm-2 control-label">图片(640x100):<span style="color: red;">*</span></label>
	                    <div class="col-sm-10 js_upload_img">
	                        <input type="file" class="form-control" id="icon"><br /> 
	                        <div name="icon" id="iocn" class="upviewer">
	                            <ul></ul>
	                        </div>
	                    </div>
					</div>
					<div class="form-group">
					 	<div class="col-sm-offset-2 col-sm-10">
							<button type="button" class="btn btn-primary" id="button">提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<div>{$page}</div>
<script language="javascript">
$(function(){
	$("#add").click(function(){
		$('#user-add').modal('show');
	})

	// initDelFile();
	// //多文件上传
	// initUploadify({
	// 	ID:'icon',
	// 	url:"{:U('Upload/upload')}",
	// 	success:function(obj){ 
	// 		if(obj.s){
	// 			$('#iocn').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
	// 			initDelFile();
	// 		}else{
	// 			alert(obj.m);
	// 		}
	// 	} 
	// });

	// function initDelFile(){
	// 	$('#iocn li a').unbind('click').click(function(){
	// 		if(!confirm('你确认删除吗?')) return false;
	// 		var _this = $(this);
	// 		var dpath = $(_this).attr('d_path');
	// 		if(!dpath) return false;
	// 		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
	// 			if(obj.s){ 
	// 				$(_this).parents('li').remove();
	// 			}else{
	// 				alert(obj.m);
	// 				$(_this).parents('li').remove();
	// 			} 
	// 		},'json');
	// 	});
	// }

 	$("#button").click(function(){
	 	var title = $('#title').val();
		var src = $('#src').val();
		var desc = $('#desc').val();
	 	
		if(title==""){
		var attrname = $("#attrname").text();
	 		alert(attrname+"不能为空");
	 		return false;
	 	}
	 	
	 	/*
 		var iocn=[];
 		$("#iocn").find("img").each(function(){
	 		iocn.push($(this).attr('src'));
	 	});
		if($("#iocn").find("img").length!=1){
			var iocnname  = $("#iocnname").text();
			alert("请上传一张"+iocnname);
			return false;
		}*/
		var iocn='';
		$("#iocn").find("img").each(function(){
	 		iocn = $(this).attr('src');
	 	});
	 	if(!iocn){
			var iocnname  = $("#iocnname").text();
			alert("请上传一张(44*44)图片");
			return false;
	 	}
	 	
	 	var url ="{:U('Article/add_advertising')}"
	 	var parm = {
	 		title:title,
	 		desc:desc,
	 		src:src,
	 		iocn:iocn,
	 	}
	 /*	console.log(parm);
	 	return false;*/
	 	$.post(url,parm,function(obj){
	 		if(obj.s){
	 			alert(obj.m);
	 			location.href="{:U('Article/advertising')}";
	 		}
	 	});
	})
});
</script>